<template>
	<view class="nav">
		<!-- <uni-icons type="contact" size="30"></uni-icons> -->
		<uni-nav-bar left-icon="left" right-icon="search" title="公告通知" @clickRight='goSeach' @clickLeft='goIndex' 
		open-type="switchTab"></uni-nav-bar>
	</view>
	<view class="tab">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" 
		styleType="text" activeColor="#2D8CF0" class='tablist'></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0"  v-for='v in noticeData' :key='v.notice_id'  @click="goDetails(v.notice_id)">
				<view>
					<view class="title">
						<text>{{v.notice_title}}</text>
					 </view>
					<view class="time">
						<text>{{v.notice_time}}</text>
					</view>
				</view>
			</view>
			<view v-show="current === 1"   v-for='v in newsData' :key='v.notice_id' @click="goDetails(v.notice_id)">
				<view>
					<view class="title">
						<text>{{v.notice_title}}</text>
					 </view>
					<view class="time">
						<text>{{v.notice_time}}</text>
					</view>
				</view>
			</view>
			<view v-show="current === 2"   v-for='v in rulesData' :key='v.notice_id'  @click="goDetails(v.notice_id)">
				<view>
					<view class="title">
						<text>{{v.notice_title}}</text>
					 </view>
					<view class="time">
						<text>{{v.notice_time}}</text>
					</view>
				</view>
			</view>
			<view v-show="current === 3"    v-for='v in instructionData' :key='v.notice_id' @click="goDetails(v.notice_id)">
				<view>
					<view class="title">
						<text>{{v.notice_title}}</text>
					 </view>
					<view class="time">
						<text>{{v.notice_time}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script >
	import { reactive, toRefs,onMounted,onBeforeMount,computed,onBeforeUpdate } from 'vue';
	import { useStore, mapState} from 'vuex';
	export default {
		setup(){
			const store = useStore();
			let data=reactive({
				items: ['公司通知', '公司新闻', '规章制度','办事指南'],
				current: 0	,
				id:0,
				noticeData:computed(() =>store.state.dongji.noticeData),
				newsData:computed(() =>store.state.dongji.newsData),
				rulesData:computed(() =>store.state.dongji.rulesData),
				instructionData:computed(() =>store.state.dongji.instructionData),
				onClickItem:(e) =>{
				     if (data.current != e	.currentIndex) {
				       data.current = e.currentIndex;
				     }
				   },
				get: () => store.commit('dongji/get'),
				setID:() => store.commit('dongji/setID',data.id),
				goSeach:()=>{
					uni.navigateTo({
						url:'../search/search'
					})
				},
				goIndex:()=>{
					uni.switchTab({
						url:'../index/index'
					})
				},
				goDetails:function(id){
					data.id=id
					data.setID()
					uni.navigateTo({
						url:'../announcement_details/announcement_details',
						events:{
							 acceptDataFromOpenedPage: function(data) {
							      // console.log(data)
							    }
						},
						success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { id: id })
						// console.log(id);
						}
					})
				}
			});
			onMounted(()=>{
				data.get();
			}); 
			return {...toRefs(data)}
		},
		
	}
</script>

<style lang="scss">
	.nav{
		height: 30rpx;
		.uniui-left{
			color:#2D8CF0 !important;
		}
		.uniui-search{
			color:#2D8CF0 !important;
		}
	}
	
	.tab{
		
		.tablist{
			padding: 0 24rpx;
		}
		.content{
			background-color: #F2F2F2;
			height: 1500rpx;
			padding-top:24rpx;
			>view{
				margin:24rpx;
				>view{
					margin-top: 24rpx;
					padding: 24rpx;
					background-color: white;
					border-radius: 20rpx;
					.time{
						color: #929292;
						margin-top: 24rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	
</style>
